<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消耗趋势</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-btn-group .layui-btn{
            padding: 0px 10px;
            height: 35px;
            line-height: 35px;
            font-size: 15px; }
        .layui-btn-cur{ background-color: #009688; color: #fff;}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        <div lay-filter="listSearch" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                {neq name="role_name" value="channel"}
                <div class="layui-inline">
                    <select name="channel_id" lay-search>
                        <option value="0">请选择投放号</option>
                        {volist name="channels" id="v"}
                        <option value="{$v.id}">{$v.account}</option>
                        {/volist}
                    </select>
                </div>
                {/neq}

                <div class="layui-inline">
                    <select name="advert_media_id">
                        <option value="0">投放媒体</option>
                        {volist name="advert_medias" key="k" id="v"}
                        <option value="{$k}">{$v}</option>
                        {/volist}
                    </select>
                </div>

                <div class="layui-inline">
                    <select name="advert_account_id">
                        <option value="0">请选择广告主</option>
                        {volist name="advert_users" key="k" id="v"}
                        <option value="{$v.id}">{$v.advert_account}</option>
                        {/volist}
                    </select>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-list-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-reset">重置</button>
                </div>

            </div>

        </div>


        <div class="layui-card-body">

            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-btn-group layuiadmin-btn-group" style="left: 10px;">
                        <a href="javascript:;" data-type="today" class="layui-btn cost-trend-tab layui-btn-primary layui-btn-xs layui-btn-cur">今日</a>
                        <a href="javascript:;" data-type="yesterday" class="layui-btn cost-trend-tab layui-btn-primary layui-btn-xs">昨日</a>
                        <a href="javascript:;" data-type="week" class="layui-btn cost-trend-tab layui-btn-primary layui-btn-xs">一周</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="LAY-cost-trend" style="width:100%;height: 300px"></div>
                </div>
            </div>


            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>

        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/layuiadmin/lib/extend/echarts.min5.4.3.js"></script>

<script>
    var cost_trend_x = {$cost_trend_x|raw};
    var cost_trend_y = {$cost_trend_y};

    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table;

        var advert_account_id = 0;
        var advert_media_id = 0;
        var channel_id = 0;

        $('.cost-trend-tab').click(function () {
            $('.cost-trend-tab').removeClass('layui-btn-cur');
            $(this).addClass('layui-btn-cur');
            var type = $(this).attr('data-type');
            $.ajax({
                url:"{:url('AdvertStatistics/cost_report_data')}",
                type:"get",
                dataType: "json",
                data:{type:type,channel_id:channel_id,advert_account_id:advert_account_id,advert_media_id:advert_media_id},
                async:true,
                success: function(rs){
                    if(rs['code'] == 1){

                        cost_trend_x = rs.data.cost_trend_x;
                        cost_trend_y = rs.data.cost_trend_y;

                        myChart.setOption({
                            xAxis: {
                                data: cost_trend_x
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '消耗金额',
                                data: cost_trend_y
                            }]
                        });

                    }else{
                        layer.msg(rs['msg']);
                    }
                    return false;
                }
            });
        })

        var myChart = echarts.init(document.getElementById('LAY-cost-trend'));
        var option = {
            // 提示框
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(50,50,50,0.5)',   // 提示背景颜色，默认为透明度为0.7的黑色
                textStyle: {
                    color: "#fff"
                },
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                },
            },
            legend: {},

            xAxis : [
                {
                    type : 'category',
                    boundaryGap: false,
                    data : cost_trend_x
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '',
                    axisLabel : {
                        formatter: '{value} '
                    },
                    axisLine: {
                        show: true
                    }
                },
                {
                    type : 'value',
                    name : '',
                    axisLabel : {
                        formatter: '{value} '
                    },
                    axisLine: {
                        show: true
                    }
                },
            ],
            series : [
                {
                    name:'消耗金额',
                    type:'line',
                    data:cost_trend_y,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                },
            ],
        };

        myChart.setOption(option);
        window.onresize = myChart.resize;

        //监听搜索
        form.on('submit(LAY-list-front-search)', function(data){
            var field = data.field;

            advert_media_id = field.advert_media_id;
            channel_id      = field.channel_id;
            advert_account_id = field.advert_account_id;

            //执行重载
            //执行重载
            table.reload('LAY-list-manage', {
                where: field
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        form.on('submit(LAY-reset)', function(data){
            var field = data.field;
            form.val("listSearch", {
                "advert_media_id": "0",
                "channel_id": "0",
                "advert_account_id" : "0"
            });

            form.render();

            advert_media_id = 0;
            channel_id      = 0;
            advert_account_id = 0;

            table.reload('LAY-list-manage', {
                where: {"channel_id": "0","advert_media_id": "0","advert_account_id": "0"}
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        table.render({
            elem: '#LAY-list-manage'
            , url: "{:url('AdvertStatistics/cost_report_data')}" //模拟接口
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , page: true //开启分页
            , limit: 20
            , cols: [[
                {field: 'cost_date', title: '日期',align: 'center'}
                , {field: 'hour', title: '小时',align: 'center'}
                , {field: 'money', title: '消耗',align: 'center'}
            ]]
        });

    });
</script>
</body>
</html>